<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关键问题5</title>
</head>
<body>
	<button onclick="demo()">点我发请求（3个请求依次发）</button>
  <script>
    /* 
			1.中断promise链
						(1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
						(2)办法: 在回调函数中返回一个pending状态的Promise实例对象
			2.promise错误穿透
						(1)当使用promise的then链式调用时, 在最后指定一个失败的回调即可, 
						(2)前面任何异步任务出了错误, 都会一点一点抛到最后失败的回调中处理
    */
		function sendAjax(options){
				return new Promise((resolve,reject)=>{
					//获取请求相关的参数
					const {url,data} = options
					//创建xhr
					const xhr = new XMLHttpRequest()
					//绑定监听
					xhr.onreadystatechange = ()=>{
						if(xhr.readyState === 4 ){
							if(xhr.status >= 200 && xhr.status <= 299) resolve(xhr.response)
							else reject(xhr.response)
						}
					}
					//自动解析json
					xhr.responseType = 'json'
					let str = ''
					for (let key in data){
						str += `${key}=${data[key]}&`
					}
					str = str.slice(0,-1)
					//配置请求信息
					xhr.open('GET',url+'?'+str)
					//发送请求
					xhr.send()
				})
			}
		
		function demo(){
			sendAjax({
				url:'https://api.apiopen.top/getJoke',
			})
			.then(
				value => {
					console.log('第1次成功了',value)
					return sendAjax({url:'https://api.apiopen.top/getJoke'})
				},
				// reason => {console.log('第1次失败了',reason);return new Promise(()=>{})} //自己写的
				reason => {throw reason} //若我们不写，会自动补全
			)
			.then(
				value => {
					console.log('第2次成功了',value)
					return sendAjax({url:'https://api.apiopen.top/getJoke'})
				},
				// reason => {console.log('第2次失败了',reason);return new Promise(()=>{})} //自己写的
				//reason => {throw reason} //若我们不写，会自动补全
			)
			.then(
				value => {console.log('第3次成功了',value)},
				// reason => {console.log('第3次失败了',reason)} //自己写的
				//reason => {throw reason} //若我们不写，会自动补全
			)
			.catch(
				reason => {
					console.log(reason)
					return new Promise(()=>{})
				}
			)
			
		}
		
		//验证一下then不写失败的回调会怎样
		/* new Promise((resolve,reject)=>{
			setTimeout(()=>{
				reject('a')
			},1000)
		})
		.then(
			value => {
				console.log('成功了1',value)
				return Promise.reject('b')
			},
			// reason => {throw reason} //对于then方法来说，如果程序员不写失败的回调，那么底层补全该行代码
		)
		.then(
			value => {console.log('成功了2',value)},
			reason => {console.log('失败了2',reason)}
		) */
		
	
	</script>
</body>
</html>